* {
    box-sizing: border-box;
}

.bordered {
    border: 1px solid red;
}

.page {
    background-color: whitesmoke;
    min-height      : 100vh;

    .userInfo {
        position        : relative;
        background-image: url(https://img.yzcdn.cn/upload_files/2019/01/31/Fp3kIohim8ZiB1yLepoMMW8is_qY.png);
        background-size: 100% 100%;
        height          : 172Px;
        padding         : 0 15Px;
        display         : flex;
        align-items     : center;

        .userInfoAvatar {
            width          : 60Px;
            height         : 60Px;
            margin-bottom  : 34Px;
            overflow       : hidden;
            background-size: 60Px 60Px;
            border         : 1Px solid #fff;
            border-radius  : 50%;
            box-shadow     : 0 2Px 4Px rgba(0, 0, 0, .1);

            .avatarPic {
                width : 100%;
                height: 100%;
            }
        }

        .userInfoUserInfo {
            display       : flex;
            flex-direction: column;
            align-items   : flex-start;
            margin-bottom : 34Px;
            margin-left   : 15Px;

            .userInfoUsername {
                max-width    : 200Px;
                overflow     : hidden;
                font-weight  : 700;
                font-size    : 20Px;
                line-height  : 30Px;
                white-space  : nowrap;
                text-align   : left;
                text-overflow: ellipsi
            }

            .userInfoUserGrowth {
                padding         : 2Px 8Px;
                color           : #fddda5;
                font-size       : 11Px;
                line-height     : 16Px;
                letter-spacing  : 0;
                background-image: radial-gradient(circle at 2% 85%, #444039 0, #37332c 82%);
                border          : 1Px solid #171717;
                border-radius   : 10Px;


            }


        }

        .userInfoLevelWrapper {
            position: absolute;
            right   : 0;
            bottom  : 0;
            left    : 0;
            width   : 100%;

            .userInfoLevel1 {
                position        : absolute;
                bottom          : 0;
                left            : 3%;
                display         : flex;
                align-items     : center;
                justify-content : space-between;
                width           : 94%;
                height          : 40Px;
                color           : #fff;
                background-color: rgb(58, 54, 47);
                background-size : cover;
                border-radius   : 8Px 8Px 0 0;
                box-shadow      : 0 -2Px 8Px 0 rgba(0, 0, 0, .2);

                .name {
                    display           : block;
                    -webkit-box-flex  : 1;
                    -webkit-flex      : 1;
                    flex              : 1;
                    -webkit-align-self: flex-start;
                    align-self        : flex-start;
                    padding-left      : 10Px;
                    overflow          : hidden;
                    font-size         : 12Px;
                    line-height       : 40Px;
                    white-space       : nowrap;
                    text-overflow     : ellipsis;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    color             : #ffdea0;

                    &:before {
                        display         : inline-block;
                        width           : 16Px;
                        height          : 12Px;
                        margin-right    : 5Px;
                        vertical-align  : -1Px;
                        background-size : cover;
                        content         : "";
                        background-image: url(https://b.yzcdn.cn/member-center/free-icon-1.png)
                    }
                }

                .level {
                    display            : -webkit-box;
                    display            : -webkit-flex;
                    display            : flex;
                    -webkit-box-align  : center;
                    -webkit-align-items: center;
                    align-items        : center;
                    margin-right       : 10Px;
                    font-size          : 12Px;
                    line-height        : 12Px;

                    &:after {
                        display       : inline-block;
                        width         : 16Px;
                        height        : 12Px;
                        margin-left  : 5Px;
                        vertical-align: -1Px;
                        content       : ">";
                    }
                }
            }
        }
    }

    .AtList {
        width: 94%;
        margin: 10Px auto;
        border-radius: 8Px;
    }

    .TabHeader {
        width: 94%;
        margin: 10Px auto -10Px;
        border-radius: 8Px 8Px 0 0;
    }

    .tabBar {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}